<link rel="import" href="/bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="/bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/neon-animation/web-animations.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="./app-messages.html">
<link rel="import" href="./auth-login.html">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" >

<dom-module id="cats-app">
  <template>
    <style>
      :host {
        font-family: monospace;
      }

      app-header {
        background-color: #1A73E8;
        color: #FFF;
        font-weight: normal;
      }

      app-header paper-tab a:hover {
        color: black;
      }

      paper-tabs {
        margin-left: 5px;
        font-size: 16px;
      }

      paper-tab {
        @apply --layout-flex-none;
        padding: 0;
      }

      paper-tab a {
        @apply --layout-horizontal;
        @apply --layout-center-center;
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        padding: 0 10px;
        height: 100%;
      }

      #logo {
        width: 50px;
        height:50px;
      }

      .icon-dropdown {
        width: 32;
        height: 32px;
        margin-left: 4px;
      }
      .group-item {
        --paper-item-selected-weight: normal;
        --paper-item-selected: {
          background-color: var(--app-primary-color);
          color:white;
        };
      }
      .group-item-link {
        text-decoration: none;
        color:white;
      }
      .group-item-link:hover {
        background-color: var(--app-primary-color);
      }
      .group-listbox {
        padding: 0px;
        color: white;
        background-color: #4C8BF5;
        cursor: pointer;
      }
      .group-menu-button {
        color: white;
        font-size: 16px;
        padding: 0 10px;
      }
      .group-menu-button :hover {
        color: black;
      }
      .group-name {
        @apply --layout-flex-none;
        padding: 0;
        color: #ffffffc7;
        text-transform: none;
        margin-left: 5px;
        font-size: 16px;
        font-weight: 500;
        /*font-weight: 500;*/
      }
      .group-name: hover {
        color: black;
      }
      .hidden {
        display: none;
      }
      .banner {
        background-color: lightgoldenrodyellow;
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        font-family: sans-serif;
        font-style: italic;
      }
    </style>

    <app-messages></app-messages>

    <app-header-layout>
      <app-header slot="header">
        <app-toolbar>
          <paper-tabs no-bar>
            <img id="logo" src="/images/findit.png">
            <paper-tab><a href="/">Home</a></paper-tab>
            <paper-tab><a href="/p/chromium/coverage">Code Coverage</a></paper-tab>
            <paper-tab><a href="/p/chromium/disabled-tests">Disabled Tests</a></paper-tab>
          </paper-tabs>

          <!-- Flakes selection -->
          <paper-menu-button class="group-menu-button">
            <paper-button slot="dropdown-trigger">
              <span class="group-name">Flake Portal</span>
              <iron-icon
                  class="icon-dropdown"
                  icon="arrow-drop-down"></iron-icon>
            </paper-button>
            <paper-listbox class="group-listbox" slot="dropdown-content">
              <paper-item class="group-item" data-flake="Flakes">
                <a class=group-item-link href="/p/chromium/flake-portal/flakes">Flakes</a></paper-item>
              <paper-item class="group-item" data-flake="Report">
                <a class=group-item-link href="/p/chromium/flake-portal/report">Report</a>
              </paper-item>
              <paper-item class="group-item" data-flake="Analysis">
                <a class=group-item-link href="/p/chromium/flake-portal/analysis">Analysis</a>
              </paper-item>
            </paper-listbox>
          </paper-menu-button>

          <paper-tabs no-bar>
            <paper-tab><a href="/waterfall/trooper">Trooper</a></paper-tab>
            <template is="dom-if" if="[[userInfo.is_admin]]">
              <paper-tab>|<a href="/waterfall/list-failures?days=1">Failures</a></paper-tab>
              <paper-tab><a href="/waterfall/try-job-dashboard">Jobs</a></paper-tab>
              <paper-tab><a href="/waterfall/pipeline-errors-dashboard">PipelineErrors</a></paper-tab>
              <paper-tab><a href="/waterfall/auto-revert-metrics">RevertMetric</a></paper-tab>
              <paper-tab><a href="/waterfall/config">Config</a></paper-tab>
            </template>
          </paper-tabs>
          <div main-title flex></div>
          <paper-tabs no-bar>
            <paper-tab>
              <auth-login is-admin="[[userInfo.is_admin]]" email="[[userInfo.email]]" login-url="[[userInfo.login_url]]" logout-url="[[userInfo.logout_url]]" login-required="[[loginRequired]]"></auth-login>
            </paper-tab>
          </paper-tabs>
        </app-toolbar>
      </app-header>
      <div id="banner" class$="{{_bannerClass(banner.message)}}">
        <b>Notice:</b>
        [[banner.message]]
        <template is="dom-if" if="[[banner.bug]]">
          <a href="http://crbug.com/[[banner.bug]]">[[banner.bug]]</a>
        </template>
      </div>
      <div id="main-content">
        <template is="dom-if" if="[[pageHeader]]">
          <h2>[[pageHeader]]</h2>
        </template>
        <slot></slot>
      <div>
    </app-header-layout>
  </template>
  <script src="../js/load_analytics.js"></script>
  <script>
   (function() {
     'use strict';

     Polymer({
       is: 'cats-app',

       properties: {
         pageHeader: {
           type: String,
           value: undefined,
         },

         loginRequired: {
           type: Boolean,
           value: false,
         },
         userInfo: {
           type: Object,
           value: undefined,
         },
         components: {
           type: String,
           value: undefined,
         },
         banner: {
           type: Object,
           value: {},
         },
       },

       _bannerClass : function (msg) {
         // CSS class for the div containing the message given.
         if (!msg) {
           return "hidden";
         }
         return "banner";
       },

       ready : function () {
         // From https://chromium.googlesource.com/infra/infra/+/master/crdx/feedback/README.md
         (function(i,s,o,g,r,a,m){i['CrDXObject']=r;i[r]=i[r]||function(){
           (i[r].q=i[r].q||[]).push(arguments)},a=s.createElement(o),
           m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,'script','https://storage.googleapis.com/crdx-feedback.appspot.com/feedback.js','crdx');

         let comment = encodeURIComponent('Page URL: ' + window.location.href + '\n\n Description:\n');
         let components = this.components || 'Tools>Test>FindIt';
         crdx('setFeedbackButtonLink', 'https://bugs.chromium.org/p/chromium/issues/entry?labels=Pri-2&status=Unconfirmed&components=' + components + '&comment=' + comment);
       },
     });
   })();
  </script>
</dom-module>
